<template>
  <div class="hello">
    <h1>{{ title }}</h1>
    <p>Author: <span>{{author}}</span></p>
    <p >{{desc1}}</p>
    <p >{{desc2}}</p>
    <p >{{desc3}}</p>
    <ul>
      <li>
       
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'introduce',
  data () {
    return {
      title: 'Project Introduce',
      author:'陈建强',
      desc1:'1、基于Vue、Vue-router、Vuex的一个小项目，使用jsonp方式调用公开API，展示豆瓣电影，百度音乐等相关信息',
      desc2:'2、另外做了一个简单的基于vue的loading插件',
      desc3:'3、hilo外链到一个h5小游戏引起做的伪3d效果页。'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
  font-size: .36rem;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
p{
  font-size: .24rem;
  line-height: .48rem;
  text-align: left;
  text-indent: 2rem;
}
</style>
